<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <%- include src/pages/common/styles.html -%>

  <title>申请贷款</title>
</head>
<body>
  <%- include src/pages/common/header.html -%>

  <div class="content">
    <div class="main-container">
      <div class="loan__steps">
          <ol class="steps">
            <li class="steps__item active">
              <span class="steps__indicator">1</span>
              <div class="steps__inner">身份验证</div>
            </li>
            <li class="steps__item active">
              <span class="steps__indicator">2</span>
              <div class="steps__inner">视频面签</div>
            </li>
            <li class="steps__item">
              <span class="steps__indicator">3</span>
              <div class="steps__inner">完成签署</div>
            </li>
          </ol>
      </div>

      <div class="stepanel identity-upload">
        <span class="stepanel__arrow nobar"></span>

        <div class="licence__item">
          <div class="licence__uploader frontid">
            <h4 class="licence__name">
              法人身份证（正面）
              <a href="#exemplar"
                data-toggle="modal"
                class="licence__examplar"
                data-source="<%= require('images/example-id-front.png') %>"
              >
                示例图
              </a>
            </h4>
            <div class="uploader__inner">
              <div class="uploader__dimmer">
                <label class="btn">上传<input type="file"></label>
              </div>
            </div>
          </div>
          <div class="licence__previewer">
            <div class="previewer__card">
              <dl class="previewer__line">
                <dt class="line__title">姓名</dt>
                <dd class="line__content">黄XX</dd>
              </dl>
              <dl class="previewer__line">
                <dt class="line__title">性别</dt>
                <dd class="line__content">男</dd>
              </dl>
              <dl class="previewer__line">
                <dt class="line__title">民族</dt>
                <dd class="line__content">汉</dd>
              </dl>
              <dl class="previewer__line">
                <dt class="line__title">出生</dt>
                <dd class="line__content">1987年09月17日</dd>
              </dl>
              <dl class="previewer__line">
                <dt class="line__title">地址</dt>
                <dd class="line__content">北京市海淀区西北旺东路100号中关村科技园</dd>
              </dl>
              <dl class="previewer__line">
                <dt class="line__title">公民身份证号码</dt>
                <dd class="line__content">111624199211020314</dd>
              </dl>
            </div>
          </div>
        </div>

        <div class="licence__item">
          <div class="licence__uploader uploaded backid">
            <h4 class="licence__name">
              法人身份证（反面）
              <a href="#exemplar"
                data-toggle="modal"
                class="licence__examplar"
                data-source="<%= require('images/example-id-back.png') %>"
              >
                示例图
              </a>
            </h4>
            <div class="uploader__inner">
              <div class="uploader__dimmer">
                <label class="btn">上传<input type="file"></label>
              </div>
            </div>
          </div>
          <div class="licence__previewer">
            <div class="previewer__card">
              <dl class="previewer__line">
                <dt class="line__title">签发机关</dt>
                <dd class="line__content">深圳公安局</dd>
              </dl>
              <dl class="previewer__line">
                <dt class="line__title">有效期</dt>
                <dd class="line__content">2015.10.08-2025.10.08</dd>
              </dl>
            </div>
          </div>
        </div>

        <div class="text-center">
          <button class="btn btn-primary" data-toggle="modal" data-target="#recordTip">下一步</button>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade modal-exemplar J_exemplar" id="exemplar" tabindex="-1" role="dialog" aria-labelledby="">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">示例图</h4>
        </div>
        <div class="modal-body">
          <div class="exemplar__image">
            <img src="" class="J_example">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade messagebox" id="recordTip" tabindex="-1" role="dialog" aria-labelledby="">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <a class="messagebox__close" data-dismiss="modal" aria-label="Close"></a>
        <div class="modal-body">
          <p class="text-center">接下来将录制一段视频,请确认摄像头开启, 准备好身份证, 并跟随屏幕提示朗读提示的文字.</p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary btn--outline" data-dismiss="modal">放弃录制</button>
          <button class="btn btn-primary">开始录制</button>
        </div>
      </div>
    </div>
  </div>

  <%- include src/pages/common/footer.html -%>
  <%- include src/pages/common/scripts.html -%>

</body>
</html>